    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

    <div id="box1">
        我是box1
        <span id="sp">
            我是sapn
        </span>

    </div>
    </body>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        #sp {
            background-color: yellowgreen;
        }
    </style>

    <script>
        window.onload = function () {

            /**
             * 事件冒泡
             *  - 事件冒泡：事件从最内层开始，向外层传播
             *  - 在开发中大部分情况冒泡都是有用的，如果不需要冒泡，可以取消冒泡（event.cancelBubbl）
             */
            // 给 span 绑定单击事件，点击span时，会先执行 span 的单击绑定函数，然后会执行 div 的单击绑定函数，最后会执行 body 的单击绑定函数
            var sp = document.getElementById("sp");
            sp.onclick = function (event) {
                event = event || window.event;
                alert("我是 span 的单击绑定函数")
                event.cancelBubble = true; //取消冒泡
            }

            // 给 box1 绑定单击事件，点击box1时，会先执行 div 的单击绑定函数，然后会执行 body 的单击绑定函数
            var box1 = document.getElementById("box1");
            box1.onclick = function (event) {
                event = event || window.event;
                alert("我是 div 的单击绑定函数")
                event.cancelBubble = true; //取消冒泡
            }

            // 给 body 绑定单击事件，点击body时，会先执行 body 的单击绑定函数
            var body = document.body
            body.onclick = function () {
                alert("我是 body 的单击绑定函数")
            }
        }
    </script>
    </html>
